<template>
<div>
    <div class="nctouch-home-block">
        <div class="item-pic" style="position: relative;">
            <img
            :src="image"
            alt
            style="width: 100%;"
            />
            <a
            href="javascript:void(0);"
            style="display: inline-block; position: absolute; width: 100%; height: 100%; left: 0%; top: 0%;"
            ></a>
        </div>
    </div>
    <div class="nctouch-home-block">
        <div class="item-pic" style="position: relative;">
            <img
            :src="image1"
            alt
            style="width: 100%;"
            />
            <a
            href="javascript:void(0);"
            style="display: inline-block; position: absolute; width: 50%; height: 100%; left: 0%; top: 0%;"
            ></a>
            <a
            href="javascript:void(0);"
            style="display: inline-block; position: absolute; width: 50%; height: 100%; left: 50%; top: 0%;"
            ></a>
        </div>
    </div>
    <div class="nctouch-home-block" style>
        <div class="item-pic" style="position: relative;">
            <img :src="image2" style="width: 100%;"/>
            <a href="javascript:void(0);" style="display: inline-block; position: absolute; width: 100%; height: 100%; left: 0%; top: 0%;"></a>
        </div>
    </div>
    <div class="nctouch-home-block item-text item-headline">
        <img :src="data.imageUrl"/>
        <div class="tempWrap" >
            <ul class="item-text-list">
                <li class="item clone" v-for="item in list" :key="item.content">
                    <a href="javascript:void(0);">
                    <span class="hot">{{item.hot}}</span>
                    <span class="ellipsis hotContent">{{item.content}}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="home56 clearfix">
        <img :src="home56" class="fl"/>
        <img :src="home78" class="fr"/>
    </div>
</div>
</template>

<script>
export default {
props:['val'],
data(){
    return {
      data:"",
      image:"",
      image1:"",
      image2:"",
      list:"",
      home56:"",
      home78:""

    }
},
watch:{
    val(){
        this.image = JSON.parse(this.val[2].itemData)[0].imageUrl
        this.image1 = JSON.parse(this.val[3].itemData)[0].imageUrl
        this.image2 = JSON.parse(this.val[4].itemData)[0].imageUrl
        this.data = JSON.parse(this.val[5].itemData)[0]
        this.list = this.data.hots
        this.home56 = JSON.parse(this.val[7].itemData)[0].imageUrl
        this.home78 = JSON.parse(this.val[7].itemData)[1].imageUrl
    }
},

}
</script>

<style lang='stylus' scoped>
.home56
    margin: 0.208rem 0.1rem
    img
        border-radius 0.05rem
        width: 49%;
        &:nth-of-type(2)
            float right
.item-headline
    background: #FFF
    width: auto
    margin: 0 2.66%
    position: relative
    height 0.36rem
    padding-left: 0.94rem
    border-radius: 0.1rem
    border: 0.01rem solid #E3E3E3
    img
        height: auto
        position: absolute
        top: 0
        bottom: 0
        margin: auto
        width 0.77rem
        left 0.1rem
    .tempWrap
        overflow: hidden
        position: relative
        height: 0.34rem
        ul
            height 1.7rem
            li
                height 0.34rem
                a 
                    font-size: 0.56rem
                    color: #535353
                    line-height: 1.55rem
                    display: flex
                    align-items: center
                    justify-content: flex-start
                    height: 100%
                span
                    font-size 0.12rem
                    &:nth-of-type(1)
                        color: #FF4A42
                        margin-right: 0.2rem
                        background: #FFEAE9
                        display: inline-block
                        height 0.1385rem
                        line-height 0.1385rem
</style>